<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
		<title>留言板</title>
		<link rel="stylesheet" href="../res/layui/css/layui.css">
		<link rel="stylesheet" href="../res/static/css/index.css">
		<style type="text/css">
		body {
	background-color: #EDD5E5;
}
        </style>
	</head>

	<body>
		<!-- nav部分 -->
		<div class="nav">
			<div class="layui-container">
					<button>
          <span></span><span></span><span></span>
        </button>
					<ul class="layui-nav" lay-filter="">
						<li class="layui-nav-item">
							<a href="index.html">首页</a>
						</li>
						<li class="layui-nav-item">
							<a href="introduce.html">个人介绍</a>
						</li>
						<li class="layui-nav-item">
							<a href="habit.html">兴趣爱好</a>
						</li>
                      <li class="layui-nav-item ">
							<a href="school.html">学校</a>
						</li>
						</li>
						<li class="layui-nav-item layui-this">
							<a href="ly.html">留言板</a>
						</li>
					</ul>
		  </div>
	</div>
		</div>
	<!-- banner部分 -->
		<div class="banner lyb">
			<div class="title">
				<p><strong>留言板</strong></p>
				<p class="en"><strong>Message board</strong></p>
			</div>
		</div>
		<!-- main部分 -->
		<div class="lyb1">
        <br />
		  <h2 align="center" >有什么想对我说的，写给我吧~~^^~~</h2>	
         <br />
         <br />
		<textarea id="memo" cols="60" rows="10"></textarea>
		<input type="button" value="追加内容" onclick="saveStorage('memo')" />
		<input type="button" value="初始化" onclick="clearStorage('msg')" />
		<hr />
		<p id="msg"></p>
		<script type="text/javascript">
			function saveStorage(id) {
				//获取textarea的value值
				var data = document.getElementById(id).value;
				//获取当前时间戳
				var time = new Date().getTime();
				//将时间戳作为键值，textarea的value值作为键值的内容保存在本地数据库
				localStorage.setItem(time, data);
				//保存成功后提示成功
				console.log("数据已保存");
				//设置loadStorage函数的传参（ID值）
				loadStorage('msg');
			}

			function loadStorage(id) {
				var result = '<table border="1">';
				//遍历本地数据所有内容
				for(var i = 0; i < localStorage.length; i++) {
					//获取每一条新增的键值
					var kes = localStorage.key(i);
					//获取新增键值的内容
					var value = localStorage.getItem(kes);
					//获取时间对象
					var date = new Date();
					//将时间戳转化为正常时间 Mon Jun 19 1972 11:12:44 GMT+0800 (中国标准时间) 的格式
					date.setTime(kes);
					//将转化后的内容变成字符串
					var datestr = date.toGMTString();
					//将所有新增内容添加到result变量中
					result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>'
				}
				result += '</table>';
				var target = document.getElementById(id);
				//将所有内容添加到元素中显示
				target.innerHTML = result;

			}

			function clearStorage() {
				//清除本地储存所有内容
				localStorage.clear();
				console.log("清除完毕");
			}
		</script>
		</div>
	
	<script src="../res/layui/layui.js"></script>
	<script>
			layui.config({
				base: '../res/static/js/'
			}).use('firm');
		</script>
</body>

</html>